<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>插值表达式</h1>
			<p>a={{a}},b={{b}},c={{c}}</p>
			<p>插值表达式计算:{{a*b+b*c+a*c}}</p>
			<p>计算属性:{{result}}</p>
			<h1>练习</h1>
			输入圆的半径:<input type="text" v-model="r" /><br />
			周长是:{{2*3.1415926*r}}<br />
			周长是:{{permeter}}<br />
			<h1>例子2</h1>
			姓:<input type="text" v-model="firstName" /><br />
			名:<input type="text" v-model="lastName" /><br />
			姓名:<input type="text" v-model.lazy="fullName" />
			<h1>例子3 过滤数组</h1>
			<ul>
				<li v-for="s in passStudent">
					{{s.name}},{{s.score}}
				</li>
			</ul>
			<hr />
			<ul>
				<li v-for="s in uppassStudent">
					{{s.name}},{{s.score}}
				</li>
			</ul>
		</div>
		
		<script>
			var app = Vue.createApp({
				data() {
					return {
						a: 10,
						b: 20,
						c: 30,
						r: 0,
						firstName:"",
						lastName:"",
						stus:[
							{name:"张飞",score:50},
							{name:"张三",score:90},
							{name:"张三丰",score:53},
							{name:"李四",score:99},
							{name:"王五",score:100}
						]
					}
				},
				// 计算属性选项
				computed:{
					passStudent(){
						return this.stus.filter(s => s.score>=60);
					},
					uppassStudent(){
						return this.stus.filter(s=>s.score<60);
					},
					
					result(){
						return this.a*this.b+this.b*this.c+this.a*this.c;
					},
					// 计算周长	
					permeter(){
						return 2*3.1415926*this.r;
					},
					// fullName(){
					// 	return this.firstName+" "+this.lastName;
					// }
					// 通过修改计算属性，反过来修改模型中的数据
					fullName:{
						set(newValue)
						{
							// jack jerry
							newValu = newValue.trim();
							var names = newValue.split(" ")
							console.log(names)
							this.firstName = names[1]
							this.lastName = names[names.length-1]
						},
						get()
						{
							return this.firstName+" "+this.lastName;
						}
					}
				}
			});
			var vm = app.mount("#app")
		</script>
	</body>
</html>